<template>
  <div class="search-header-wrapper" v-show="!isFullScreenTable" v-cloak>
    <div class="search-box single" v-if="isSingle">
      <form class="form-inline" v-if="!isReload">
        <div class="form-group">
          <slot>
          </slot>
           <!--<label for="sr-only hide">单个条件选择列表</label> -->
          <div class="single-search-wrapper input-group">
            <div class="input-group-addon">
              <el-select
                class="single-list"
                v-model="singleIndex"
                :style="{width: singleWidth + 'px'}"
              >
                <el-option
                  v-for="(item, index) in selectionList" 
                  :key="index"
                  :label="item.text"
                  :value="index"
                >
                </el-option>
              </el-select>
            </div>
            <div class="selected-region" v-for="(item, index) in selectionList" :key="index" v-show="index === singleIndex">
              <search-temp :data-obj="item" @handleChange="handleChange"></search-temp>
            </div>
          </div>
        </div>
        <div class="form-group search-group">
          <a class="ake_btn ake_btn_blue search-btn" @click.prevent="confirmSearch"><i class="ion-ios-search-strong"></i></a>
        </div>
      </form>
      <div class="search-btngroup">
        <a href="javascript:;" class="ake_btn ake_btn_text ake_icon_btn switch-search-pattern" @click="changeHeight(1)"><i class="ion-arrow-swap"></i><span>多项</span></a>
      </div>
    </div>
    <div class="search-box compound" v-else>
      <form class="form-inline" v-if="!isReload">
        <div class="form-group" v-for="(item, index) in selectionList" :key="index" v-if="index < 3">
          <label class="sr-only" for="">{{item.text}}</label>
          <div class="input-group">
              <div class="input-group-addon text-center">{{item.text}}</div>
              <search-temp :data-obj="item" @handleChange="handleChange"></search-temp>
          </div>
        </div>
        <div class="form-group" v-if="selectionList.length > 3">
          <a class="show-more-trigger" v-show="!isMoreFilters" @click="changeHeight(0)"><i class="ion-chevron-down"></i><span>更多条件</span></a>
          <a class="show-more-trigger" v-show="isMoreFilters" @click="changeHeight(0)"><i class="ion-chevron-up"></i><span>收起条件</span></a>
        </div>
        <div class="more-filters" v-show="isMoreFilters">
          <div class="form-group" v-for="(item, index) in selectionList" :key="index" v-if="index >= 3">
            <label class="sr-only" for="">{{item.text}}</label>
            <div class="input-group">
                <div class="input-group-addon text-center">{{item.text}}</div>
                <search-temp :data-obj="item" @handleChange="handleChange"></search-temp>
            </div>
          </div>
        </div>
      </form>
      <div class="search-btngroup setting-group" v-if="!isReload">
        <a class="ake_btn ake_btn_blue search-btn" @click.prevent="confirmSearch"><i class="ion-ios-search-strong"></i></a>
        <a href="javascript:;" class="ake_btn ake_btn_text ake_icon_btn switch-search-pattern" @click="changeHeight(1)"><i class="ion-arrow-swap"></i><span>单项</span></a>
        <a href="javascript:;" class="ake_btn ake_btn_blue ake_font_btn ml10" @click.stop="toggleSettingFn" v-if="isSaveSearch"><i class="ion-gear-a"></i></a>
        <transition name="scale">
          <div class="search-setting-box scale-box" v-if="isSaveSearch" v-show="isShowSetting">
            <div class="setting-scroll-box">
              <!-- <ul v-if="!isReload"> -->
              <ul>
                <template v-for="(item, idx) in selectionList">
                  <li :key="idx">
                    <div class="operation-line" @mouseenter="showOperation(idx)" @mouseleave="hideOperation(idx)">
                      <span class="operation-item">{{item.text}}</span>
                      <span class="operate-btn-box" v-show="item.isShow">
                        <i class="ion-arrow-up-c light-green" aria-hidden="true" title="前进" @click.stop="moveItemFn(idx,1)"></i>
                        <i class="ion-arrow-down-c light-green" aria-hidden="true" title="后退" @click.stop="moveItemFn(idx,0)"></i>
                      </span>
                    </div>
                  </li>
                </template>
              </ul>
            </div>
          </div>
        </transition>
      </div>
    </div>
  </div>
</template>

<script>
import common from '../../mixins/common.js'
import searchHeader from '../../mixins/tables/searchHeader.js'
import setSearchHeader from '../../mixins/tables/setSearchHeader.js'
import SearchTemp from './SearchTemp'
export default {
  mixins: [common, searchHeader, setSearchHeader],
  components: {
    SearchTemp
  },
  data() {
    return {
      value: ''
    }
  },
  methods: {
    handleChange (item) {
      this.$emit('handleChange', item);
    }
  }
}
</script>

<style lang="less">
@import "../../assets/less/base/variables.less";
@import "../../assets/less/base/form.less";
@import "../../assets/less/base/button.less";

.ml10 {margin-left: 10px;}
.search-header-wrapper {
  padding: @spacing 0px;
  border-bottom: 1px solid @greydd;
  transition: all .3s ease;
  .search-box {
    padding: @spacing @spacing*2 0px;
    display: flex;
    justify-content: space-between;
    transition: all .3s ease;
  }
  .show-more-trigger{
    display: inline-block;
    height: @inputH;
    line-height: @inputH;
    color: @blue;
    font-size: @baseFontSize;
    letter-spacing: 1px;
    cursor: pointer;
    &:hover{
      color: @mainBg;
    }
    i {
      margin-right: 4px;
    }
  }
}
.search-box {
  &.single{
    .search-btngroup{
      align-self: flex-start;
    }
  }
  .form-inline {
    flex: 1;
    padding-right: 20px;
  }
  .form-group{
    margin-bottom: @spacing;
    margin-right: 10px;
    .single-search-wrapper {
      font-size: 0;
      overflow: hidden;
      .input-group-addon{
        display: inline-block;
        padding: 0px;
        height: @inputH;
        vertical-align: top;
        .single-list {
          width: auto;
          border: none;
          // height: 28px;
          // padding: 0px 8px;
          padding: 0;
          color: @lightBlack;
          background-color: @greyee;
          input {
            border-top-right-radius: 0px;
            border-bottom-right-radius: 0px;
            border: 0;
            height: 28px;
            line-height: 28px;
          }
        }
      }
      .selected-region{
        padding: 0;
        margin: 0;
      }
    }
    .form-control {
      width: 120px;
      min-width: 120px;
      padding: 0px 10px;
    }
    &.search-group{
      vertical-align: top;
    }
  }
}
.search-btngroup{
  align-self: flex-end;
  margin-bottom: 8px;
  .switch-search-pattern{
    padding-left: 14px;
    padding-right: 14px;
    font-size: 15px;
    margin-left: 10px;
    i{
      font-size: 17px;
      margin-right: 4px;
    }
  }
}
.search-btn{
  i{
    display: inline-block;
    color: #FFF;
    font-size: 24px;
    width: 24px;
    height: 24px;
    margin-top: 2px;
  }
}
.more-filters{
  display: block;
  perspective-origin: 0 50%;
  transition: transform .3s ease;
}

.single-search-wrapper{
  .selected-region{
    display: inline-block;
    width: auto;
    height: auto;
    .form-control{
      .border-right-radius(4px);
    }
  }
}
.input-group {
  .form-input{
    min-width: 120px;
    width: 150px;
    input {
      border-top-left-radius: 0px;
      border-bottom-left-radius: 0px;
    }
  }
}
.setting-group {
  position: relative;
  .ake_font_btn {
    font-size: 18px;
  }
}
.search-setting-box {
  position: absolute;
  top: 38px;
  right: -16px;
  width: 220px;
  max-height: 340px;
  background-color: rgba(51,51,51,.9);
  color: #FFF;
  font-size: 13px;
  border-radius: 6px;
  transform-origin: 88% -10px;
  z-index: 2200;
  .setting-scroll-box {
    width: 100%;
    max-height: 340px;
    overflow-y: auto;
  }
  &::after {
    content: '';
    position: absolute;
    top: -10px;
    right: 22px;
    width: 0;
    height: 0;
    border: 10px solid transparent;
    border-width: 0 6px 10px;
    border-bottom-color: rgba(51,51,51,.9);
  }
  ul {
    width: 100%;
    padding: 0px 10px 0px 15px;
    -webkit-user-select: none;
    user-select: none;
    li {
      height: auto;
      line-height: 24px;
      margin-top: 12px;
      &:not(.has-second-stage) {
        height: 24px;
      }
      .second-header {
        padding-bottom: 0px;
        li {
          height: 24px;
          padding-bottom: 0px;
        }
      }
      .operation-item {
        font-size: 14px;
        font-weight: 700;
        cursor: pointer;
        vertical-align: bottom;
      }
      .operate-btn-box {
        vertical-align: baseline;
      }
      &.not-all {
        &:last-child {
          border-bottom: 1px dashed #FFF;
        }
      }
      &:last-child {
        height: 24px + @spacing * 2;
        padding-bottom: @spacing;
      }
      &.has-second-stage {
        &:last-child {
          height: auto;
          padding-bottom: @spacing * 2;
        }
      }
    }
    + ul {
      li {
        &:last-child {
          border-bottom: 0;
          margin-bottom: 15px;
          padding-bottom: 0px;
          height: 24px;
        }
      }
    }
  }
}

// .slide-down-enter,.slide-down-leave-active{
//   transform: scaleY(0);
// }
// .slide-down-enter-active,.slide-down-leave{
//   transform: scaleY(1);
// }
</style>
